<template>
  <div class="min-h-[100vh] bg-[#eee] ">
    <div class="bg-white">
      <div class="max-w-[1200px] m-auto py-5">
        <img class="h-[55px]" src="@/assets/title.png">
      </div>
    </div>
    <div class="max-w-[1200px] m-auto ">
      <div class="mt-[30px]">
        <p class="text-3xl">新用户注册</p>
        <p class="text-sm py-1">本账号是您享受全面的城市资询及服务的网上通行证，请确保账号的唯一性及资料的准确性</p>
        <p class="text-sm py-1 text-[red]">
          注册须知一：因公安部人口库接口开放时间限制，系统注册时间为每日8:00-18:00，该时间段外将无法注册认证；</p>
        <p class="text-sm py-1 text-[red]">
          注册须知二：政务服务将逐步升级认证机制，请您如实填写个人信息，确保在不断升级过程中业务正常办理。</p>
      </div>
      <div class="bg-white p-2 mt-[30px]">
        <div class="py-3 px-[250px]">
          <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="手机号码:" prop="phone" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入手机号码'
                }
            ]">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="用户账号:" prop="username" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入用户账号'
                }
            ]">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="登录密码:" prop="password" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入登录密码'
                }
            ]">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="confirmPassword" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入确认密码'
                }
            ]">
              <el-input v-model="form.confirmPassword"></el-input>
            </el-form-item>


            <el-form-item label="用户姓名:" prop="realName" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入用户姓名'
                }
            ]">
              <el-input v-model="form.realName"></el-input>
            </el-form-item>

            <el-form-item label="身份证号码:" prop="cardId" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入身份证号码'
                }
            ]">
              <el-input v-model="form.cardId"></el-input>
            </el-form-item>
            <el-form-item label="身份证有效期:">
              <div class="mb-2">
                <el-date-picker value-format="yyyy-MM-DD" v-model="form.cardExpireStart"
                                class="!w-1/2"></el-date-picker>
              </div>
              <div class="">
                <el-date-picker value-format="yyyy-MM-DD" v-model="form.cardExpireEnd"
                                class="!w-1/2"></el-date-picker>
              </div>
              <div>
                <el-radio-group v-model="form.cardExpireNumber">
                  <el-radio value="5" label="5年"></el-radio>
                  <el-radio value="10" label="10年"></el-radio>
                  <el-radio value="20" label="20年"></el-radio>
                  <el-radio value="100" label="其他"></el-radio>
                </el-radio-group>
              </div>
            </el-form-item>
            <el-form-item label="是否法人:" prop="isBusiness">
              <el-checkbox v-model="form.isBusiness"></el-checkbox>
            </el-form-item>

            <el-form-item v-if="form.isBusiness" label="营业执照:" prop="businessNumber" :rules="[
                {
                  required:true,
                  trigger:'blur',
                  message:'请输入营业执照'
                }
            ]">
              <el-input v-model="form.businessNumber"></el-input>
            </el-form-item>

          </el-form>
          <div class="flex pl-[100px]">
            <el-checkbox v-model="agreen"></el-checkbox>
            <div class="text-sm pl-1">我已阅读并同意<span
                class=" text-[#2196f3]"> 《天津市统一身份认证平台注册协议》</span></div>
          </div>
          <div class="mt-5">
            <el-button type="primary" class="w-full" @click="handlerRegister">注册</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>

<script>
import api from "@/api";

export default {
  name: "index",
  data() {
    return {
      agreen: false,
      form: {
        businessNumber: "",
        isBusiness: false,
        phone: "",
        username: "",
        password: "",
        confirmPassword: "",
        realName: "",
        cardId: "",
        cardExpireStart: "",
        cardExpireEnd: "",
        cardExpireNumber: ""
      }
    }
  },
  methods: {
    handlerRegister() {

      this.$refs.form.validate((vaild) => {
        if (vaild) {
          console.log('>>>>>>>>待提交的参数', this.form)
          if (this.form.password !== this.form.confirmPassword) {
            this.$notify({
              title: "提示",
              type: "error",
              message: "密码不一致"
            })
            return
          }
          if (!this.agreen) {
            this.$notify({
              title: "提示",
              type: "error",
              message: "请先同意协议"
            })
            return
          }
          api.register(this.form).then((res) => {
            console.log('>>>>>>>>>>res', res)
            this.$notify({
              title: "提示",
              type: "success",
              message: "注册成功"
            })
            setTimeout(() => {
              this.$router.push("/login")
            }, 2000)
          })
        }
      })
    }
  }
}
</script>
